{template header}
<link rel="stylesheet" href="static/calendar/js/calendar.css" />
<script type="text/javascript" charset="utf-8" src="static/calendar/calendar.php"></script>
<link rel="stylesheet" href="static/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="static/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="static/kindeditor/lang/zh_CN.js"></script>
<script src="//cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<div id="matchInfo">
  <form class="form-horizontal" method="POST" action="index.php?c=admin&a=matchAction" enctype="multipart/form-data">
    <div class="control-group">
      <label class="control-label">名称：</label>
      <div class="controls">
        <input name="name" v-model="matchInfo.name"/>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">赛事说明：</label>
      <div class="controls">
        <label class="radio inline">
          <input type="radio" name="introduce_type" value="0" v-model="matchInfo.introduce_type"/>
          使用外部链接
        </label>
        <label class="radio inline">
          <input type="radio" name="introduce_type" value="1" v-model="matchInfo.introduce_type"/>
          使用自定义内容
        </label>
      </div>
    </div>
    
    <div class="control-group" v-show="matchInfo.introduce_type==0">
      <label class="control-label">外部链接：</label>
      <div class="controls">
        <input name="introduce_url" v-model="matchInfo.introduce_url"/>
      </div>
    </div>
    
    <div class="control-group" v-show="matchInfo.introduce_type==1">
      <div class="controls">
        <textarea rows="10" name="introduce" style="width:800px; min-height:200x;">{$introduce}</textarea>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">Banner (750×315)</label>
      <div class="controls">
        <input type="text" name="banner_src" v-model="matchInfo.banner_src"/>
        <input type="file" name="banner_src_file"/>
        <img v-bind:src="matchInfo.banner_src"/>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">主办方Logo (48x48)</label>
      <div class="controls">
        <input type="text" name="logo_src" v-model="matchInfo.logo_src" />
        <input type="file" name="logo_src_file"/>
        <img v-bind:src="matchInfo.logo_src"/>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">主办方名称</label>
      <div class="controls">
        <input type="text" name="sponsor" v-model="matchInfo.sponsor" />
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">赛事类型：</label>
      <div class="controls">
        <label class="radio inline">
          <input type="radio" name="match_type" value="0" v-model="matchInfo.match_type"/>
          个人
        </label>
        <label class="radio inline">
          <input type="radio" name="match_type" value="1" v-model="matchInfo.match_type"/>
          群组
        </label>
        <label class="radio inline">
          <input type="radio" name="match_type" value="2" v-model="matchInfo.match_type"/>
          混合
        </label>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">赛事周期</label>
      <div class="controls">
        <input name="stime" id="stime" v-model="matchInfo.stime"/>
        <input name="" type="button" id="stimebtn" onclick="return showCalendar('stime', '%Y-%m-%d %H:%M:%S', '24', false, 'stimebtn');" value="选择" class="button" />
        -
        <input name="etime" id="etime" v-model="matchInfo.etime"/>
        <input name="" type="button" id="etimebtn" onclick="return showCalendar('etime', '%Y-%m-%d %H:%M:%S', '24', false, 'etimebtn');" value="选择" class="button" />
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">一句话概括目标</label>
      <div class="controls">
        <input name="aim_desc" type="text" v-model="matchInfo.aim_desc">
      </div>
    </div>
    
    <div id="user_rule" class="control-group" v-show="matchInfo.match_type!=1">
      <div class="control-label">赛事目标-个人</div>
      <div class="controls">
        <a href="#user_rule" class="btn" v-on:click="addOrGroup('user_rule')">+或</a>
        <a href="#user_rule" class="btn" v-on:click="addAndGroup('user_rule')" v-show="matchInfo.rule.user_rule.length">+且</a>
        <!--group-->
        <div v-for="(or_index,or_group) in matchInfo.rule.user_rule">
          <div style="border:1px solid #000">
            <!--item-->
            <div v-for="(and_index,and_group) in or_group">
              <select v-model="and_group.rate">
                <option value="总计">总计</option>
                <option value="每天">每天</option>
                <option value="任意天">任意天</option>
                <option value="每次">每次</option>
              </select>
              达到
              <input v-model="and_group.value"/>
              <select v-model="and_group.unit">
                <option value="公里">公里</option>
                <option value="次">次</option>
                <option value="分钟">分钟</option>
                <option value="天">天</option>
              </select>
              <a class="btn" href="#user_rule" v-on:click="deleteAndGroup('user_rule',or_index,and_index)">-</a>且
            </div>
          </div>
          <a class="btn" href="#user_rule" v-on:click="deleteOrGroup('user_rule',or_index)">-</a>或
        </div>
      </div>
    </div>
    
    <div id="group_rule" class="control-group" v-show="matchInfo.match_type!=0">
      <div class="control-label">赛事目标-群组</div>
      <div class="controls">
        <a href="#group_rule" class="btn" v-on:click="addOrGroup('group_rule')">+或</a>
        <a href="#group_rule" class="btn" v-on:click="addAndGroup('group_rule')" v-show="matchInfo.rule.group_rule.length">+且</a>
        <!--group-->
        <div v-for="(or_index,or_group) in matchInfo.rule.group_rule">
          <div style="border:1px solid #000">
            <!--item-->
            <div v-for="(and_index,and_group) in or_group">
              <select v-model="and_group.rate">
                <option value="总计">总计</option>
                <option value="每天">每天</option>
                <option value="任意天">任意天</option>
                <option value="每次">每次</option>
              </select>
              达到
              <input v-model="and_group.value"/>
              <select v-model="and_group.unit">
                <option value="公里">公里</option>
                <option value="次">次</option>
                <option value="分钟">分钟</option>
                <option value="天">天</option>
              </select>
              <a class="btn" href="#group_rule" v-on:click="deleteAndGroup('group_rule',or_index,and_index)">-</a>且
            </div>
          </div>
          <a class="btn" href="#group_rule" v-on:click="deleteOrGroup('group_rule',or_index)">-</a>或
        </div>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">选择模板</label>
      <div class="controls">
        <label class="radio inline">
          <input type="radio" name="template_id" value="0" v-model="matchInfo.template_id">
          <img width="150" src="/static/images/match_template1.jpg">
          小清新
        </label>
        <label class="radio inline">
          <input type="radio" name="template_id" value="1" v-model="matchInfo.template_id">
          <img width="150" src="/static/images/match_template2.jpg">
          朦胧美
        </label>
        <label class="radio inline">
          <input type="radio" name="template_id" value="2" v-model="matchInfo.template_id">
          <img width="150" src="/static/images/match_template3.png">
          超酷炫
        </label>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">选择按钮</label>
      <div class="controls">
        <label class="checkbox inline" v-for="(index,name) in menuItems">
          <input type="checkbox" name="menu_items[]" v-bind:value="index" v-model="matchInfo.menu_items">{$zuokuohao}name{$youkuohao}
        </label>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">预计效果</label>
      <div class="controls" style="width:200px">
        <button type="button" style="float:left" v-for="item in matchInfo.menu_items">
          {$zuokuohao}menuItems[item]{$youkuohao}
        </button>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">排行榜-个人</label>
      <div class="controls">
        <label class="checkbox inline">
          <input type="checkbox" name="user_tabs[]" value="0" v-model="matchInfo.user_tabs">总里程
        </label>
        <label class="checkbox inline">
          <input type="checkbox" name="user_tabs[]" value="1" v-model="matchInfo.user_tabs">总时长
        </label>
        <label class="checkbox inline">
          <input type="checkbox" name="user_tabs[]" value="2" v-model="matchInfo.user_tabs">单次里程
        </label>
        <label class="checkbox inline">
          <input type="checkbox" name="user_tabs[]" value="3" v-model="matchInfo.user_tabs">单次时长
        </label>
        <label class="checkbox inline">
          <input type="checkbox" name="user_tabs[]" value="4" v-model="matchInfo.user_tabs">打卡天数
        </label>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">排行榜-群组</label>
      <div class="controls">
        <label class="checkbox inline">
          <input type="checkbox" name="group_tabs[]" value="0" v-model="matchInfo.group_tabs">总里程
        </label>
        <label class="checkbox inline">
          <input type="checkbox" name="group_tabs[]" value="1" v-model="matchInfo.group_tabs">总时长
        </label>
        <label class="checkbox inline">
          <input type="checkbox" name="group_tabs[]" value="2" v-model="matchInfo.group_tabs">单次里程
        </label>
        <label class="checkbox inline">
          <input type="checkbox" name="group_tabs[]" value="3" v-model="matchInfo.group_tabs">单次时长
        </label>
      </div>
    </div>
    
    <a class="btn" target="_blank" v-bind:href="'?c=admin&a=goodsList&match_id='+matchInfo.match_id">先保存赛事，再点此编辑商品</a>
    
    <div id="discount" class="control-group">
      <label class="control-label">折扣</label>
      <div class="controls">
        <a href="#discount" class="btn" v-on:click="addDiscount">+增加项</a>
        <div v-for="(index,item) in matchInfo.discount">
          数量
          <input v-model="item.num"/>
          折扣(小于1)
          <input v-model="item.discount"/>
          <a href="#discount" class="btn" v-on:click="deleteDiscount(index)">-</a>
        </div>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">报名费</label>
      <div class="controls">
        <input name="cost" v-model="matchInfo.cost" v-model="matchInfo.cost">
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">报名说明</label>
      <div class="controls">
        <textarea name="add_introduce">{$add_introduce}</textarea>
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">名额限制（0表示不限制）</label>
      <div class="controls">
        <input name="limit_member_max" v-model="matchInfo.limit_member_max">
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">是否免费参赛</label>
      <div class="controls">
        <input type="radio" name="is_free_add" v-model="matchInfo.is_free_add" value="0">否
        <input type="radio" name="is_free_add" v-model="matchInfo.is_free_add" value="1">是
      </div>
    </div>
    
    <div class="control-group">
      <label class="control-label">赛事状态</label>
      <div class="controls">
        <select name="status" v-model="matchInfo.status">
          <option v-bind:value="index" v-for="(index,status) in matchStatus" v-text="status"></option>
        </select>
      </div>
    </div>
    
    <div class="control-group">
      <div class="controls">
        <button type="submit" v-on:click="clickSubmit">提交</button>
      </div>
    </div>
    <input type="hidden" name="matchInfoJSON" v-model="matchInfoJSON"/>
  </form>
</div>

<script>

var editor;
KindEditor.ready(function(K) {
  editor = K.create('textarea[name="introduce"]', {
    allowFileManager : true,
    uploadJson: './index.php?c=admin&a=uploadKindEditorImg',
    newlineTag:'p',
    filterMode : true,
    htmlTags:{
      p : ['style','color', 'align'],
      font : ['style','color', 'size', 'face'],
      span : ['style','style','color', 'align'],
      div : ['style','class', 'align'],
      a : ['style','class', 'href', 'target', 'name'],
      embed : ['style','src', 'width', 'height', 'type', 'loop', 'autostart', 'quality',
      'style', 'align', 'allowscriptaccess', '/'],
      img : ['style','src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style','data-source','/'],
      hr : ['style','class', '/'],
      br : ['/'],
      'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : ['style','align'],
      'tbody,tr,strong,b,sub,sup,em,i,u,strike' : ['style'],
    },
    afterBlur: function(){this.sync();}
  });
});
var matchInfo = '{$matchInfoJSON}'
var matchStatus = '{$matchStatus}'
var match = new Vue({
    el:"#matchInfo",
    data:{
        matchInfo:{},
        matchStatus:{},
        menuItems:{
            "0":"报名信息",
            "1":"排名数据",
            "2":"成绩证书",
            "3":"我的订单",
            "4":"赛事说明"
        },
        goods: '',
        matchInfoJSON: '',
    },
    watch: {
        'matchInfo.enableGoods' :function(val,oldVal){
            this.matchInfo.goods = []
            for(goods in val){
                this.matchInfo.goods.push(goods.id)
            }
        }
    },
    created: function(){
        this.matchInfo = JSON.parse(matchInfo)
        this.matchStatus = JSON.parse(matchStatus)
        this.goods = JSON.stringify(this.matchInfo.goods)
    },
    methods:{
        addOrGroup: function(rule_group){
            this.matchInfo.rule[rule_group].push([])
            this.addAndGroup(rule_group)
        },
        addAndGroup: function(rule_group){
            if(this.matchInfo.rule[rule_group].length==0){
                return
            }
            var rule = {
                "rate":"",
                "value":"",
                "unit":""
            }
            this.matchInfo.rule[rule_group][this.matchInfo.rule[rule_group].length-1].push(rule)
        },
        deleteOrGroup: function(rule_group,or_index){
            this.matchInfo.rule[rule_group].splice(or_index,1)
        },
        deleteAndGroup: function(rule_group,or_index,and_index){
            this.matchInfo.rule[rule_group][or_index].splice(and_index,1)
        },
        addDiscount: function(){
            var item = {"num":0,"discount":0}
            this.matchInfo.discount.push(item)
        },
        deleteDiscount: function(index){
            this.matchInfo.discount.splice(index,1)
        },
        clickSubmit: function(){
            this.matchInfoJSON = JSON.stringify(this.matchInfo)
            Vue.nextTick(function(){
                $('form').submit()
            })
        }
    }
})
</script>

{template footer}
